<template>
	<div class="count-views">
		<div class="card__header">
			<el-text  tag="b">
				{{ data?.quotaCode }}
			</el-text>
			<div>
				<el-text>
					<span class="label">LAST：</span>
					<span class="value">{{ data?.quotaValue }}</span>
				</el-text>
			</div>
			<div>
				<el-text>
					<span class="label">CHANGE：</span>
					<span class="value" :style="{
						color: data?.changeYesterdayQuota>0 ? 'green' : 'red'
					}">{{ data?.changeYesterdayQuota>0 ? '+' : '' }}{{ data?.changeYesterdayQuota }}</span>
					<span class="value" :style="{
						color: data?.changeYesterdayQuota>0 ? 'green' : 'red',
						marginLeft: '10px'
					}">{{ data?.changeYesterdayQuota>0 ? '+' : '' }}{{ data?.compareYesterdayRange }}%</span>
				</el-text>
			</div>
		</div>
		<v-chart :option="chartOption" autoresize :manual-update="true" ref="refChart" />
		<div class="card__footer">
			<table class="table-info">
        <tr style="text-align: right;">
					<td style="flex: 1">
						Top
					</td>
					<td style="flex: 1">
						75%
					</td>
					<td style="flex: 1">
						Median
					</td>
					<td style="flex: 1">
						25%
					</td>
					<td style="flex: 1">
						Bottom
					</td>
				</tr>
				<tr style="text-align: right">
					<td style="flex: 1">
            {{ data?.top }}
					</td>
					<td style="flex: 1">
            {{ data?.quartile75 }}
					</td>
					<td style="flex: 1">
            {{ data?.median }}
					</td>
					<td style="flex: 1">
            {{ data?.quartile25 }}
					</td>
					<td style="flex: 1">
            {{ data?.bottom }}
					</td>
				</tr>
			</table>
      <span style="font-size: 12px; padding-top: 50px">{{ data?.brief }}</span>
		</div>

	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useCool } from "/@/cool";
// import * as echarts from "echarts";
const props = defineProps({
	data: Object,
})

const { refs, setRefs, router, service } = useCool();

const refChart = ref(null)
let chartOption = reactive({
	grid: {
		left: 40,
		top: 20,
		right: 0,
		bottom: 20
	},
	tooltip: {
        trigger: 'axis',
        formatter: function(params) {
           var result = '';
           params.forEach(function (item) {
              result += `${item.marker + item.seriesName}<br />`;
           });
					 console.log('params', params)
           result += `${params[0].axisValue} <b style="margin-left: 10px">${params[0].value}</b> `;  // 这里加上x轴的名称
           return result;
        },
    },
	xAxis: {
		type: "category",
		boundaryGap: false,
		axisLine: {
			show: false
		},
		data: []
	},
	yAxis: {
		type: "value",
		splitLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		}
	},
	series: [
		{
			type: "line",
			showSymbol: false,
			data: [],
			label: {
				show: true,
				position: 'bottom',
				textStyle: {
					fontSize: 20
				}
			},
      itemStyle: {
        color: "#abbaf1"
      },
      lineStyle: {
        width: 1,
        color: "#4165d7"
      },
		}
	]
});

async function queryQuota() {
	if (!props.data) {
		return;
	}
	try {
		const data = await service.app.quota.quotaTrendChart({
			quotaCode: props.data?.quotaCode,
			quotaQuantity: 1
		});
    props.data.top = data?.top;
    props.data.bottom = data?.bottom;
    props.data.median = data?.median;
    props.data.quartile25 = data?.quartile25;
    props.data.quartile75 = data?.quartile75;

		chartOption.series[0].data = data.date || [];
		chartOption.xAxis.data = data.value || [];
		console.log(refChart, 'quotaTrendChart')
		refChart?.value?.chart?.setOption({
			tooltip: {
				trigger: 'axis'
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data:  data.date || [],
				axisLabel: {
					textStyle: {
						fontSize: 10,
					}
				}
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					textStyle: {
						fontSize: 10,
					}
				}
			},
			series: [
				{
					name: props.data?.quotaCode,
					type: "line",
					showSymbol: false,
					smooth: true,
					label: {
						show: true,
						position: 'bottom',
						textStyle: {
							fontSize: 10
						}
					},
					itemStyle: {
						color: "#abbaf1"
					},
					lineStyle: {
						width: 1,
            color: "#4165d7"
					},
					areaStyle: {},
					data: data.value || [],
				}
			]
		})
	} catch (error) {
		console.log(error);
	}
}
queryQuota()
</script>

<style lang="scss" scoped>
.count-views {
  .card__header {
    font-size: 13px;
  }

	.title {
		font-size: 16px;
	}

	.label {
		font-size: 12px;
		font-weight: bold;
	}

	.echarts {
		height: 120px;
		width: 100%;
	}

	&__container {
		padding: 0;
	}

	&__footer {
		border-top: 0;
	}

	.table-info {
		font-size: 12px;
		width: 100%;
		border-collapse: collapse;

		td {
			padding: 0 2px;
			border: 1px solid #ddd;
		}
	}
}
</style>
